<template>
	<view class="container">
		<view class="content">
			<view class="user" @click="handlePersonal">
				<view class="avatar">
					<image class="img" :src="userInfo.avatar || '/static/default-avatar.png'" mode=""></image>
				</view>
				<view class="cont">
					<view class="name u-line-1">{{ userInfo.nick_name }}</view>
				</view>
			</view>
		</view>
		
		<view class="pos">
			<view class="order">
				<view class="title">
					<view class="left">订单中心</view>
					<view class="right" @click="handleService()">
						查看全部
						<image src="@/static/right.png"></image>
					</view>
				</view>
				<view class="list">
					<view class="item" @click="handleService(item)" v-for="item in orderNavbar" :key="item.flag">
						<view class="icon">
							<view class="badge" v-if="item.count && item.count > 0">
								<template v-if="item.count <= 99">{{ item.count }}</template>
								<template v-else>99+</template>
							</view>
							<image class="img" :src="item.icon" mode="heightFix"></image>
						</view>
						<view class="text">{{ item.name }}</view>
					</view>
				</view>
			</view>
			
			<view class="order">
				<view class="title">
					<view class="left">我的服务</view>
					<view class="right"></view>
				</view>
				<view class="list">
					<view class="item" @click="enterAddress()">
						<view class="icon">
							<image class="img" src="@/static/shouhuo_address.png" mode="heightFix"></image>
						</view>
						<view class="text">地址信息</view>
					</view>
					<!-- <view class="item" @click="enterContact()">
						<view class="icon">
							<image class="img" src="@/static/menu_customer.png" mode="heightFix"></image>
						</view>
						<view class="text">在线客服</view>
					</view> -->
					<view class="item">
						<button class="btn-normal" open-type="contact">
						  <view class="icon">
						  	<image class="img" src="@/static/menu_customer.png" mode="heightFix"></image>
						  </view>
						  <view class="text">在线客服</view>
						</button>
					</view>
					<view class="item" @click="enterDealer()">
						<view class="icon">
							<image class="img" src="@/static/menu_fenxiao.png" mode="heightFix"></image>
						</view>
						<view class="text">
							<text v-if="applyStatus > 0">分销中心</text>
							<text v-else>申请分销</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		
		<view class="loginc" :class="{show:showPopup}">
			<view class="mask" catch:touchmove="emptyHandler"></view>
			<view class="loginb">
				<view class="l-top">
					<view class="t1">授权信息</view>
					<view class="t2">完善您的头像、昵称</view>
				</view>
				<button class="l-item" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="left">头像</view>
					<view class="right">
						<image :src="userInfo.avatar" class="avatar"></image>
						<image class="arrow" src="@/static/right2.png"></image>
					</view>
				</button>
				<view class="l-item" @click="enterNickName">
					<view class="left">昵称</view>
					<view class="right">
						<input type='nickname' name='nickname' class="nickname" :value='userInfo.nick_name' placeholder="请填写您的昵称">
						<image class="arrow" src="@/static/right2.png"></image>
					</view>
				</view>
				<view class='btn-query'  @click="closePopup">允许</view>
				<view class='btn-cancel'  @click="closePopup">拒绝</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import { Dealer } from '@/utils/model/dealer-model.js';
	var dealer = new Dealer();
	import { Order } from '@/utils/model/order-model.js';
	var order = new Order();
	import { User } from '@/utils/model/user-model.js';
	var user = new User();
	/**
	 * flag: 标识; name: 标题名称; icon: 图标; count: 数量; type 类型(rediect1 和 switchTab2、 正常跳转0); url: 跳转的链接
	 */
	const orderNavbar = [{
			flag: 'payment',
			name: '待付款',
			icon: '/static/order_dai_pay.png',
			count: 0,
			type: 0,
			url: '/pages/order/list?type=1',
		},
		{
			flag: 'delivery',
			name: '待发货',
			icon: '/static/order_dai_fahuo.png',
			count: 0,
			type: 0,
			url: '/pages/order/list?type=2',
		},
		{
			flag: 'received',
			name: '待收货',
			icon: '/static/order_dai_shouhuo.png',
			count: 0,
			type: 0,
			url: '/pages/order/list?type=3',
		},
		 {
		 	flag: 'comment',
		 	name: '待评价',
			icon: '/static/order_dai_pingjia.png',
		 	count: 0,
			type: 0,
		 	url: '/pages/order/list?type=4',
		 },
		{
			flag: 'refund',
			name: '售后',
			icon: '/static/order_tuikuan_tuihuo.png',
			type: 0,
			url: '/pages/refund/index',
			count: 0
		}
	]
	export default {
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 首次加载
				isFirstload: true,
				// 是否已登录
				isLogin: false,

				// 系统设置
				setting: {},
				// 当前用户信息
				userInfo: {},
				// 账户资产
				assets: {
					balance: '--',
					points: '--',
					coupon: '--'
				},
				orderNavbar,
				// 常用功能
				//common,
				// 当前用户待处理的订单数量
				todoCounts: {
					payment: 0,
					deliver: 0,
					received: 0,
				},
				status: 10,
				applyStatus: -1,
				
				
				showPopup: false,//登录组件是否显示
			}
		},
		onShow() {
			this.onRefreshPage()
		},
		methods: {
			openPopup() {
				// 隐藏底部导航
				uni.hideTabBar();
				// 显示你的弹框
				this.showPopup = true;
			},
			closePopup() {
				// 隐藏你的弹框
				this.showPopup = false;
				// 显示底部导航
				uni.showTabBar();
			},
			enterAddress(){
				uni.navigateTo({
					url: '/pages/my/address/index'
				})
			},
			enterDealer(){
				//审核状态 (10待审核 20审核通过 30驳回) -1未申请
				if(this.applyStatus == 10){
					uni.showModal({
						title: '友情提示',
						content: '审核中',
						showCancel: false
					}) 
				}else if(this.applyStatus == 20){
					uni.navigateTo({
						url: '/pages/dealer/index'
					})
				}else if(this.applyStatus == 30){
					uni.showModal({
						title: '友情提示',
						content: '申请驳回，有疑问请联系管理员',
						showCancel: false
					}) 
				}else{
					uni.navigateTo({
						url: '/pages/dealer/apply'
					})
				}
			},
			
			onRefreshPage() {
				this.checkLogin()
				if(this.isLogin){
					this.getPageData()
				}
			},
			checkLogin(){
				this.userInfo = uni.getStorageSync('userInfo')
				this.isLogin = false
				if(this.userInfo){
					this.isLogin = true
				}
			},
			getPageData(callback) {
				const that = this;
				that.isLoading = true
				Promise.all([that.getTodoCounts(), that.getDealerInfo()])
					.then(result => {
						that.isFirstload = false
						// 初始化订单操作数据
						that.initOrderTabbar()
						// 执行回调函数
						callback && callback()
					})
					.catch(err => console.log('catch', err))
					.finally(() => {
						that.isLoading = false
					})
			},
			
			getDealerInfo(){
				let that = this
				dealer.getStatus().then(res => {
					console.log('11111111111111111111111111111111111111')
					console.log(res)
					console.log('2222222222222222222222222222222222222')
					if(res.code == 1){
						this.applyStatus = res.data.applyStatus 
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			getTodoCounts(){
				const that = this;
				return new Promise((resolve, reject) => {
					order.getTodoCounts().then(res => {
						if(res.code == 1){
							that.todoCounts = res.data
							resolve(that.todoCounts)
						}
					}).catch(err => {
						console.log(err)
					})
				})
				
			},
			// 获取当前用户信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					user.getDetail().then(res => {
						if(res.code == 1){
							that.userInfo = res.data.userInfo
							resolve(that.userInfo)
						}
					}).catch(err => {
						console.log(err)
					})
				})
				
				
			},
			
			// 初始化订单操作数据
			initOrderTabbar() {
				const that = this
				const newOrderNavbar = []
				orderNavbar.forEach(item => {
					console.log(item)
					if (item.count != undefined) {
						item.count = that.todoCounts[item.flag]
					}
					newOrderNavbar.push(item)
				})
				that.orderNavbar = newOrderNavbar
			},
			
			// 跳转到登录页
			handleLogin() {
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			// 跳转到个人信息页
			handlePersonal() {
				uni.navigateTo({
					url:'/pages/my/info'
				})
			},
			// 跳转到订单页
			onTargetOrder(item) {
				/* this.$navTo('pages/order/index', {
					dataType: item.flag,
					storeShopType: item.store_shop_type
				}) */
			},
			// 跳转到服务页
			handleService(item) {
				console.log(item)
				if(item == undefined){
					uni.navigateTo({
						url: '/pages/order/list'
					})
					return
				}
				const url = item.url
				const flag = item.flag
				if (flag == 'logout') {
					const app = this
					uni.showModal({
						title: '提示',
						content: '确定要退出登录吗?',
						success(res) {
							if (res.confirm) {

								app.goEasy.disconnect()

								store.dispatch('Logout', {}).then(result => app.onRefreshPage())
							}
						}
					})
				} else {
					if (url) {
						if (item.type == 2)
							uni.switchTab({
								url: `/${url}`
							})
						else
							uni.navigateTo({
								url: url
							})
					}
				}
			},
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},
	}
</script>


<style>
	page {
		background-color: #EFEFEF;
	}
</style>

<style lang="scss" scoped>
	
	@import '~@/pages/my/index.scss';
</style>